<template>
  <!-- 账号常用设置 -->
  <div class="account-setting">
    <div class="content">
      <!-- <div class="line">
        <span class="label">常用素材</span>
        <div class="line-right" @click="jump('/commonMaterial')">
          <span class="red-text">还有15个待上传</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div> -->
      <div class="line">
        <span class="label">个性化参数</span>
        <div class="line-right" @click="jump('/individuationConfig')">
          <span class="gray-text" v-if="gexing">已设置</span>
          <span class="red-text" v-else>未设置</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line">
        <span class="label">拍摄参与度</span>
        <div class="line-right" @click="jump('/cameraConfig')">
          <span class="gray-text" v-if="canyudu">已设置</span>
          <span class="red-text" v-else>未设置</span>

          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findFilmingParticipation } from '@/api/account'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      gexing: false,
      canyudu: false
    }
  },
  computed: {
    ...mapGetters(['commonUrlPath']),
    role () {
      return sessionStorage.getItem('role')
    }
  },
  // TODO 常用素材参数还没有拿到
  mounted () {
    this.getCanyudu()
    document.title = '账号常用设置'
  },
  methods: {
    getCanyudu () {
      findFilmingParticipation().then(res => {
        console.log('参与度：', res)
        this.canyudu = res.filming_participation === 'ON'
        if (res.font_key && res.voice_key) {
          this.gexing = true
        }
      })
    },
    jump (path) {
      path = `${this.commonUrlPath}${path}`
      this.$router.push({ path })
    }
  }
}
</script>

<style scoped>
.line-right {
  display: flex;
  align-items: center;
  height: 5.87vw;
}
.right-icon {
  width: 2vw;
  height: 2vw;
}
.account-setting {
  padding-top: 5.33vw;
}
.content {
  width: 89.6vw;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 2.13vw;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15.47vw;
  margin: 0 4vw;
  border-bottom: 1px solid #E6E6E6;
}
.line:last-of-type {
  border-bottom: none;
}
.label {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #333333;
}
.red-text, .gray-text {
  margin-right: 1.6vw;
}
.red-text {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #EA0000;
}
.gray-text {
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  color: #999999;
}
</style>